<template>
  <div class="right-bot public-box">
    <p class="public-tit">投诉协调占比</p>
    <!-- 协调服务各区占比 -->
    <div id="serviceChart" class="statistical-chart" style="width: 100%;height: calc(100% - 80px)">

    </div>
    <div class="circle-img">
      <!--      <p class="font-70">-->
      <!--        {{ sum }}<i class="font-40">%</i>-->
      <!--      </p>-->
      <!--      <p class="font-32">问题</p>-->
    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
import { stt } from '@/models/screen'

export default {
  name: 'RightBot',
  data() {
    return {
      sum: 80

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const { data } = await stt.getScreenStatisticsCoordination()
      this.setChart(data)
    },
    setChart(trafficWay) {
      const setpie = echarts.init(document.getElementById('serviceChart'))
      const chartPieColors = [
        [
          {
            offset: 0,
            color: '#3B77FF' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#122EE4' // 100% 处的颜色
          }
        ],
        [
          {
            offset: 0,
            color: '#EE7223' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#E14728' // 100% 处的颜色
          }
        ],
        [
          {
            offset: 0,
            color: '#DCFF3B' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#E4A112' // 100% 处的颜色
          }
        ]
      ]
      const objData = array2obj(trafficWay, 'typeLabel')

      function array2obj(array, key) {
        var resObj = {}
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i]
        }
        return resObj
      }

      const seriesData = trafficWay.map((item, index) => {
        return {
          value: item.count,
          name: item.typeLabel,
          itemStyle: {
            borderWidth: 10,
            borderColor: 'rgb(8,17,40)',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops:
                chartPieColors[index > 8 ? Math.floor(Math.random() * 8 + 1) : index],
              global: false // 缺省为 false
            }
          }
        }
      })
      const legendData = []
      trafficWay.forEach(item => {
        legendData.push(item.typeLabel)
      })

      setpie.setOption({
        tooltip: {
          show: false
        },
        legend: {
          orient: 'vertical',
          type: 'scroll',
          icon: 'roundRect',
          right: 50,
          top: 'middle',
          itemGap: 55,
          itemWidth: 38,
          itemHeight: 18,
          padding: [0, 10],
          // data: ['问题', '咨询', '建议'],
          data: legendData,
          // data: trafficWay && trafficWay.filter((item) => item.typeLabel),
          formatter: function(name) {
            const data = '{value|' + (objData[name].count) + '} {title|' + name + '}'
            return data
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 30,
                color: 'rgba(255, 255, 255, 0.8)',
                padding: [0, 10]
              },
              value: {
                fontSize: 30,
                color: '#fft'
              }
            }
          }
        },
        series: [
          {
            name: '行业数据',
            type: 'pie',
            legendHoverLink: false,
            center: ['368', '50%'],
            radius: ['134', '178'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            emphasis: {
              label: {
                show: true,
                formatter: function(data) {
                  // 将中间的文本信息进行分割，设置不同的类名
                  // 百分数字的样式、百分号的样式、百分项名字的样式
                  return (
                    '{percent|' +
                    parseInt(data.percent) +
                    '}' +
                    '{per|%}' +
                    '\n{name|' +
                    data.name +
                    '}'
                  )
                },
                rich: {
                  // 中间彩色数字
                  percent: {
                    fontSize: 70,
                    fontWeight: 'bold',
                    color: '#fff'
                  },
                  per: {
                    fontSize: 40,
                    color: '#fff'

                  },
                  // 中间百分号
                  name: {
                    fontSize: 32,
                    color: 'rgba(255,255,255,.8)'
                  }
                }
              },
              show: true
            },
            data: seriesData
          }
        ]
      })

      // 默认高亮展示第一条数据
      setpie.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })

      setpie.on('mouseover', (v) => {
        if (v.dataIndex !== 0) {
          // 高亮显示悬停的那块
          setpie.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: 0
          })
          // 当检测到鼠标悬停事件，取消所有选中高亮
          setpie.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0
          })
        }
      })

      // 检测鼠标移出后显示之前默认高亮的那块
      setpie.on('mouseout', (v) => {
        setpie.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0
        })
        setpie.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.right-bot {
  width: 1076px;
  height: 553px;
  background: url("../../../assets/images/index/right_top.png") no-repeat;
  padding-right: 50px;
  box-sizing: border-box;
  position: relative;
}

.public-tit {
  margin-bottom: 20px;
}

.font-70 {
  color: #fff;
}

.circle-img {
  position: absolute;
  width: 237px;
  height: 224px;
  left: 296px;
  top: 194px;
  z-index: 9999;
  flex-direction: column;
  .flex-all-center();

  &:after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 237px;
    height: 224px;
    background: url('../../../assets/images/index/rightbot_bg.png') no-repeat;
    animation: turnLeft 3s linear infinite;

    @keyframes turnLeft {
      0% {
        -webkit-transform: rotate(0deg);
      }

      50% {
        -webkit-transform: rotate(-180deg);
      }

      100% {
        -webkit-transform: rotate(-360deg);
      }
    }
  }

  .font-32 {
    color: rgba(255, 255, 255, .8);
    line-height: 58px;
  }
}

</style>
